<template>
  <el-tree
    ref="treeForm"
    :data="treeData"
     node-key="id"
    :show-checkbox="isCheckBox"
    :check-strictly="singleCheck"
    :props="attr"
    @node-expand="nodeExpand"
    @node-collapse="nodeCollapse"
    :default-expanded-keys="defaultExpand"
    :expand-on-click-node="false"
    :default-checked-keys="defaultChecked"
    @node-click="nodeClick"
    @check-change="handleClick"
    @check="nodeCheck">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <ul   class="ztree">
            <li>
              <span class="button" :class="data.openIcon"></span>
              <span>{{ node.label }}</span>
            </li>
       </ul>
      </span>
  </el-tree>
</template>
<script>
  export default {
    name:'checkTree',
    props:{
      treeNode:{
        default: function () {
          return []
        },
        type: Array
      },
      isCheckBox:{
        default:function () {
          return true
        },
        type:Boolean
      },
      singleCheck:{
        default:function () {
          return true
        },
        type:Boolean
      },
      disableCheck:{
        default:function () {
          return true
        },
        type:Boolean
      },
      defaultChecked:{
        default: function () {
          return []
        },
        type: Array
      },
      icons:{
        default:function () {
          return {typeOne:['dept_ico_open','dept_ico_close'],typeTwo:['folder_ico_open','folder_ico_close']}
        },
        type:Object
      }

    },
    data(){
      return{
        //树数据
        treeData:[],
        //展示的label
        attr: {
          label: "name"
        },
        //默认展开的节点
        defaultExpand:[],
        //选中的id
        checkedId:'',
        //多选的id
        checkedIds:{},
        //父Id
        parentId:'',

        count:0
      }
    },
    methods:{
      //节点展开
      nodeExpand(data){
        let self = this;
        //设置图标(0 部门 1 目录)
        if(data.type === 0){
          self.$set(data, "openIcon", self.icons["typeOne"][0])
        }
        if(data.type === 1){
          self.$set(data, "openIcon", self.icons["typeTwo"][0])
        }
        data.open = true;
      },

      //节点收起
      nodeCollapse(data){
        let self = this;
        //设置图标(0 部门 1 目录)
        if(data.type === 0){
          self.$set(data, "openIcon", self.icons["typeOne"][1])
        }
        if(data.type === 1){
          self.$set(data, "openIcon", self.icons["typeTwo"][1])
        }
      },

      //默认展开的节点帅选
      getDefaultExpand(node) {
        let self = this;
        for (let k in node) {
          if (node[k].open) {
            self.$set(node[k], "chooseClass", false);
            //设置图标(0 部门 1 目录)
            if(node[k].type === 0){
              self.$set(node[k], "openIcon", self.icons["typeOne"][0])
            }
            if(node[k].type === 1){
              self.$set(node[k], "openIcon", self.icons["typeTwo"][0])
            }
            self.defaultExpand.push(node[k].id)
          }else{
            //设置图标(0 部门 1 目录)
            if(node[k].type === 0){
              self.$set(node[k], "openIcon", self.icons["typeOne"][1])
            }
            if(node[k].type === 1){
              self.$set(node[k], "openIcon", self.icons["typeTwo"][1])
            }
          }
          self.getDefaultExpand(node[k].children);
        }
      },
      //单选/复选
      handleClick(data, checked, node){
        let self = this;
        if(checked === true && self.singleCheck && !data.disabled){
          self.count = 0;
          self.checkedId = data.id;
          self.parentId = data.pId;
          self.$refs.treeForm.setCheckedNodes([data]);
          self.count++;
        }
        if(checked === false && self.checkedId !== '' && self.count ===0){
          self.checkedId = '';
        }
      },
      nodeCheck(data,node){
        let self = this;
        self.checkedIds = {};
        for(let k in node.checkedNodes){
          self.checkedIds[node.checkedNodes[k].id] = [true,node.checkedNodes[k].name,node.checkedNodes[k].type];
          self.multiCheck(node.checkedNodes,true)
        }
        self.$emit("chooseLabel",self.checkedIds);
      },
      //节点点击
      nodeClick(data,checked,node){
        let self = this;
        //如果是单选
        if(self.singleCheck && !data.disabled){
          self.checkedId = data.id;
          self.$refs.treeForm.setCheckedNodes([data]);
        }
      },

      //点击复选的时候添加expand
      multiCheck(data,checked){
        let self = this;
        for(let k in data){
          self.defaultExpand.push(data[k].id);
          self.checkedIds[data[k].id] = [checked,data[k].name,data[k].type];
          self.multiCheck(data[k].children,checked);
        }
      },

      //获取选中的id
      getChooseNodeId(){
          return {singleId:this.checkedId,multId:this.checkedIds,pId:this.parentId}
      },

      //设置节点的勾选状态
      setNodeCheckStatus(id,state){
        let self = this;
        self.$refs.treeForm.setChecked(id,state,false);
      },

      //初始化参数
      initParam(val){

        let self = this;
        self.defaultExpand = [];
        self.checkedId = '';
        self.checkedIds = {};
        self.expandTreeDefaultCheck(val);
      },
      //展开默认选中的树节点
      expandTreeDefaultCheck(val){
        let self = this;
        if(self.defaultChecked.length > 0){
          for(let k in self.defaultChecked){
            self.defaultExpand.push(self.defaultChecked[k])
          }
        }
      },
      //设为不可选
      setNodeDisabled(val){
        let self = this;
        for(let k in val){
          if(val[k].type === 0){
            self.$set(val[k],"disabled",true);
          }
          self.setNodeDisabled(val[k].children);
        }
      },
    },
    watch:{
      treeNode(val){
        let self = this;
        self.treeData = val;
        self.initParam(val);
        self.getDefaultExpand(val);
        if(this.disableCheck){
          self.setNodeDisabled(self.treeData);
        }
      }
    }
  }
</script>
